<script setup>
import { showSuccessToast, showFailToast } from 'vant';


let care = () => {
    showSuccessToast('关注成功');
    // console.log(111);
}
</script>

<template>
    <div class="box">
        <!-- <h1>我的关注页</h1> -->
        <div>
            <van-nav-bar left-text="返回" left-arrow @click-left="$router.back()" />
        </div>
        <div class="content">
            <div class="top2"></div>
            <h4>翠丝莉娜休闲泳池趴餐厅多人餐厅</h4>
            <div class="title">
                <span><van-icon name="clock-o" /> 时间</span>
                <span>13:00-17:30 开放</span>
            </div>
            <div class="title">
                <span><van-icon name="location-o" /> 位置</span>
                <span @click="$router.push('/map')">美食区 11F > </span>
            </div>

            <div class="title">
                <span><van-icon name="phone" /> 热线</span>
                <span @click="$router.push('/map')">10000 </span>
            </div>
            <div class="top6">
                <span class="top1">预约 </span>&nbsp;&nbsp;&nbsp;&nbsp; <span> 订座预约：该服务商支持预约服务</span> <br>
                <span class="top3">送餐 </span>&nbsp;&nbsp;&nbsp;&nbsp; <span> 送餐上门: 支持酒店上门送餐服务</span> <br>
                <span class="top4">现场 </span>&nbsp;&nbsp;&nbsp;&nbsp; <span> 现场堂食: 具备现场餐桌就餐条件</span> <br>
            </div>
            <div class="aside">
                <h3>服务介绍</h3>
                <p>
                    饮茶粤海未能忘。广州人喜爱饮茶，尤其爱饮早茶。早上见面，其他地方的问候语大多是“吃了吗”，广州人则往往是“饮茶未啊?”(喝茶了吗? )
                </p>
                <br>
                <p>
                    广州人所说的饮茶，实际上指的是上茶楼，不仅饮茶.还要吃点心，一盅两件，优哉游哉;不仅饮早茶D，还要饮下午茶、夜茶;不仅填饱肚皮，还顺便传播新闻、叙说友情、洽谈生意。由此可见，饮茶在一定意义上已经超越了单纯“茶”的范畴，已经成为社会交际方式的一种。饮茶构成了岭南文化别于其他文化的一个显着特质。
                </p>

            </div>
        </div>
        <div class="btnBox">
            <van-button round type="warning" size="large" @click="care"><van-icon name="logistics" /> 送餐</van-button>
            <van-button round type="warning" size="large" @click="care"><van-icon name="cash-back-record" /> 预约</van-button>

        </div>
    </div>
</template>
  

  
<style lang="scss" scoped>
.box {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: auto;

    .top2 {
        width: 375px;
        height: 200px;
        background: url('https://img2.baidu.com/it/u=1427565265,2594664057&fm=253&fmt=auto&app=138&f=JPEG?w=888&h=500') no-repeat 100%/cover;
        margin-right: .1rem;

        .van-nav-bar {
            background: transparent;
            color: white;
        }
    }

    .content {
        flex: 1;
        overflow: auto;

        //   border-top-right-radius:25px;
        //   border-top-left-radius: 25px;
        // border: 1px solid black;
        h4 {
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .title {
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: .2rem;
            padding-right: .2rem;
        }

        h3 {
            height: 40px;
            line-height: 40px;
        }

        p {
            text-indent: 24px;
        }
    }

    .btnBox {
        height: 50px;
        width: 100%;
        padding: 5px 10px;
        display: flex;
        text-align: center;


        .van-button {
            width: 45%;
        }
    }
}

.top1 {
    margin-left: .18rem;
    background-color: rgb(13, 255, 0);
}

.top3 {
    margin-left: .18rem;
    background-color: rgb(183, 117, 25);

}

.top4 {
    margin-left: .18rem;
    background-color: rgb(214, 204, 16);
}

.aside {
    padding-left: .2rem;
    padding-right: .2rem;
}

.top6 {
    line-height: .3rem;
}
</style>